<template>
  <div class="default-main ba-table-box">
    <div class="block">
      <div class="table-block">
        <el-alert class="ba-table-alert"
                  v-if="baTable.table.remark"
                  :title="baTable.table.remark"
                  type="info"
                  show-icon />
        <!-- 表格顶部菜单 -->
        <TableHeader :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
                     :quick-search-placeholder="t('Quick search placeholder', { fields: '订单号' })">
          <template #shop>
            <el-select filterable
                       v-model="baTable.comSearch.form['shop_id']"
                       clearable>
              <el-option v-for="item in shop_arr"
                         :key="item.shop_id"
                         :label="item.shop_name"
                         :value="item.shop_id">
              </el-option>
            </el-select>
          </template>
        </TableHeader>
        <el-row style="margin: 10px 0;"
                :gutter="10">
          <el-col :span="1.5"
                  v-if="baTable.auth('batchSendMess')">
            <el-button type="warning"
                       @click="batchSendMsg"
                       :loading="state.buttonLoading">批量发送
            </el-button>
          </el-col>
        </el-row>
        <Table show-overflow-tooltip
               ref="table"></Table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, provide, onBeforeMount } from 'vue'
import baTableClass from '/@/utils/baTable'
// import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { baTableApi } from '/@/api/common'
import Cookies from 'js-cookie'
import { useI18n } from 'vue-i18n'
import { getShopList } from '/@/api/backend/common'
import { batchSendMess } from '/@/api/backend/customer/batchMessage'
import { ElMessage } from 'element-plus'
const table:any = ref<InstanceType<typeof Table>>()
defineOptions({
    name: 'customer/batchMessage',
})
const { t } = useI18n()
const state: {
    buttonLoading: boolean
} = reactive({
    buttonLoading: false
})
const shop_arr = ref([] as any[])
const baTable = new baTableClass(
    new baTableApi('/customer/batchMessage/'),
    {
        column: [
            { type: 'selection', align: 'center', operator: false },
            {
                label: '店铺',
                prop:  'shop_id',
                operator: 'LIKE', 
                comSearchRender:'slot',
                comSearchSlotName: 'shop',
                show: false
            },
            {   
                label: '店铺', 
                prop: 'shop_name', 
                align: 'center',
                operator: false,
                width: 150
            },
            {   
                label: '订单号', 
                prop: 'order_id', 
                align: 'center',
                operator: false,
                width: 170
            },
            {   
                label: '发送消息内容', 
                prop: 'message_content', 
                align: 'center',
                operator: false
            },
            {   
                label: '客户昵称', 
                prop: 'buyer_nickname', 
                align: 'center',
                operator: false,
                width: 120
            },
            { 
                label: '头像', 
                prop: 'buyer_avatar', 
                align: 'center', 
                render: 'image', 
                operator: false,
                width: 100
            },
            {   
                label: '会话时间', 
                prop: 'conversations_time', 
                align: 'center',
                render: 'datetime',
                operator: 'RANGE',
                sortable: 'custom',
                width: 160
            }
        ],
        dblClickNotEditColumn: ['all']
    }
)

provide('baTable', baTable)

baTable.mount()
baTable.getIndex()
// 批量发送
const batchSendMsg = () => {
    const ids = baTable.getSelectionIds()
    if (!ids.length) {
        ElMessage ({
            type: 'error',
            message: '请选择需要发送消息的对象',
        })
        return
    }
    state.buttonLoading = true
    baTable.table.loading = true
    batchSendMess({ids}).then((res:any) => {
        if(res.code == 200) {
            ElMessage ({
                type: 'success',
                message: res.msg,
            })
            table.value.getRef().clearSelection()
        } else {
            ElMessage ({
                type: 'error',
                message: res.msg,
            })
        }
    }).finally(() => {
        state.buttonLoading = false
        baTable.table.loading = false
    })
}
const getShopArr = () => {
    getShopList().then(res => {
        if(res.data && res.data.list.length) {
            shop_arr.value = res.data.list
        }
    })
}

onBeforeMount(() => {
    getShopArr()
})
</script>

<style scoped lang="scss">
:deep(.el-popper.is-dark) {
    max-width: 50%;
}
</style>
